// -------- 变量 -----------
$list-item-top: 0.12rem;
$list-item-padding: $list-item-top $padding-md;
$list-item-expand-padding: $padding-md 0.56rem;
$list-item-avatar-space: $margin-sm;
$list-item-auxiliary-space: 0.48rem;
$list-item-action-top: $list-item-top;
$list-item-action-left: $margin-xl;
$list-item-action-item-space: $margin-md;
$list-item-action-right: $padding-md;
$list-split: $border-width-base $border-style-base $list-border-color-split;

$list-item-bg-hover: $item-background-hover;

.lv-list {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  color: $text-color;
  font-weight: $font-weight-regular;
  font-size: $font-size-base;
  line-height: $line-height-coeff;

  @include component-scroll-lg;

  .lv-loading {
    display: block;
  }

  &-item {
    position: relative;
    display: block;
    width: 100%;
    padding: $list-item-padding;
    overflow: hidden;

    &-main-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    &-main {
      flex: auto;
      overflow: hidden;
    }

    &-title-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    &-auxiliary {
      display: flex;
      align-items: center;
      margin-left: $list-item-auxiliary-space;
    }

    &-actions {
      display: flex;
      margin-inline-start: $list-item-action-left;

      > li {
        position: relative;
        display: flex;
        margin-left: $list-item-action-item-space;
        text-align: center;

        &:first-child {
          margin-inline-start: 0;
        }
      }
    }

    &-extra {
      color: $list-item-extra;
      font-size: $font-size-sm;
      line-height: $line-height-coeff-minor;
      white-space: nowrap;
    }

    & &-meta {
      display: flex;
      align-items: flex-start;
      max-width: 100%;

      &.lv-list-item-meta-only-title {
        align-items: center;
      }

      .lv-list-item-meta {
        &-avatar {
          margin-inline-end: $list-item-avatar-space;
        }

        &-content {
          flex: auto;
          min-width: 0; // 解决flex子元素width为auto的情况，适配overflow
        }

        &-title {
          width: 100%;
          color: $list-item-meta-title-color;
          font-weight: $font-weight-regular;

          > h4 {
            font-weight: $font-weight-regular;
          }
        }

        &-description {
          margin-top: $margin-xs;
          color: $list-item-meta-des-color;
          font-size: $font-size-sm;
          line-height: $line-height-coeff-minor;
        }
      }
    }

    & &-expand-icon {
      display: block;
      flex-shrink: 0;
      @include icon-size;

      margin-right: $margin-md;
      color: $icon-color;
      cursor: pointer;

      .lv-icon-host {
        display: block;
        transform: rotateZ(-90deg);
        transition: transform $motion-duration-sm $motion-func-ease;

        &.lv-list-item-expand-icon-expand {
          transform: rotateZ(0deg);
        }
      }
    }

    & &-expand-content-wrapper {
      .lv-list-item-expand-content {
        padding: $list-item-expand-padding;
      }
    }
  }

  &-split {
    .lv-list-item {
      border-block-end: $list-split;

      &:first-child {
        border-block-start: $list-split;
      }
    }
  }

  &-loading {
    min-height: 0.52rem;
  }

  &-hoverable {
    .lv-list-item {
      &:hover {
        background-color: $list-item-bg-hover;
        cursor: pointer;
      }
    }
  }
}
